﻿@section ExternalDependencies {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"></script>
    <script src="https://unpkg.com/turndown/dist/turndown.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.7/showdown.min.js"></script>
}

@(Html.DevExtreme().HtmlEditor()
    .ID("html_editor")
    .Height(300)
    .Content(@<text>
        <h2>
            <img src="../../images/widgets/HtmlEditor.svg" alt="HtmlEditor" />
            Formatted Text Editor (HTML Editor)
        </h2>
        <br>
        <p>
            DevExtreme HTML5 JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format
            textual and visual content and store it as HTML or Markdown.
        </p>
    </text>)
    .OnValueChanged("valueChanged")
    .Toolbar(toolbar => toolbar.Items(
        items => {
            items.Add().FormatName(HtmlEditorToolbarItem.Undo);

            items.Add().FormatName(HtmlEditorToolbarItem.Redo);

            items.Add().FormatName(HtmlEditorToolbarItem.Separator);

            items.Add()
                .FormatName("size")
                .FormatValues(new[] { "8pt", "10pt", "12pt", "14pt", "18pt", "24pt", "36pt" });

            items.Add()
                .FormatName("font")
                .FormatValues(new[] { "Arial", "Courier New", "Georgia", "Impact", "Lucida Console", "Tahoma", "Times New Roman", "Verdana" });

            items.Add().FormatName(HtmlEditorToolbarItem.Separator);

            items.Add().FormatName(HtmlEditorToolbarItem.Bold);

            items.Add().FormatName(HtmlEditorToolbarItem.Italic);

            items.Add().FormatName(HtmlEditorToolbarItem.Strike);

            items.Add().FormatName(HtmlEditorToolbarItem.Underline);

            items.Add().FormatName(HtmlEditorToolbarItem.Separator);

            items.Add().FormatName(HtmlEditorToolbarItem.AlignLeft);

            items.Add().FormatName(HtmlEditorToolbarItem.AlignCenter);

            items.Add().FormatName(HtmlEditorToolbarItem.AlignRight);

            items.Add().FormatName(HtmlEditorToolbarItem.AlignJustify);

            items.Add().FormatName(HtmlEditorToolbarItem.Separator);

            items.Add().FormatName(HtmlEditorToolbarItem.Color);

            items.Add().FormatName(HtmlEditorToolbarItem.Background);
        })
    )
)

<div class="options">
    @(Html.DevExtreme().ButtonGroup()
        .Items(items => {
            items.Add().Text("Html");
            items.Add().Text("Markdown");
        })
        .OnSelectionChanged("selectionChanged")
        .SelectedItemKeys(new[] { "Html" })
    )
    <div class="value-content"></div>
</div>

<script>
    function valueChanged(e) {
        $(".value-content").text(e.component.option("value"));
    }

    function selectionChanged(e) {
        var editorInstance = $("#html_editor").dxHtmlEditor("instance");
        editorInstance.option("valueType", e.addedItems[0].text.toLowerCase());
        $(".value-content").text(editorInstance.option("value"));
    }
</script>
